<template>
  <HeaderLayout title = '个人资料' :visibleMenu="false">
    <div class="back" slot='left' @click="handleBack"><Icon name = 'arrow-left' /></div>
    <div class='save' slot='right' @click="handleSave">保存</div>
    
    <CellGroup>
      <Field
        v-model = 'name'
        label = '姓名'
        placeholder = '请输入姓名'
        required
        clearable
      />
      <Field
        v-model = 'phone'
        label = '手机号码'
        placeholder = '请输入手机号码'
        required
        clearable
      />
      <Field
        v-model = 'displayArea'
        label = '所在地区'
        placeholder = '请输入所在地区'
        @focus="handleVisibleAreaPicker"
        readonly
        required
        clearable
      />
      <Field
        v-model = 'mail'
        label = '邮箱'
        placeholder = '请输入邮箱'
        required
        clearable
      />
      <Field
        v-model = 'hospital'
        label = '所在医院'
        placeholder = '请输入所在医院'
        required
        clearable
      />
      <Field
        v-model = 'position'
        label = '所在职称'
        placeholder = '请输入职称'
        required
        clearable
      />
    </CellGroup>
    <Popup v-model ="visibleAreaPicker" position = 'bottom' >
      <Picker
        show-toolbar
        title="选择所在地区"
        :columns="areaColumns"
        @change="handleAreaChange"
        @cancel="handleAreaCancel"
        @confirm="handleAreaConfirm"
      />
    </Popup>
  </HeaderLayout>
</template>

<script>

import { Icon, Field, CellGroup, Toast, Popup, Picker, Cell } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'

const citys = {
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
}

export default {

  name: 'index',

  data () {
    return {
      name: '',
      phone: '',
      area: [],
      mail: '',
      hospital: '',
      position: '',

      visibleAreaPicker: false,
      areaColumns: [
        {
          values: Object.keys(citys)
        }, {
          values: citys['浙江']
        }
      ],
    }
  },

  computed: {
    displayArea: function () {
      return this.area.join('-')
    }
  },

  methods: {
    handleBack: function () {
      this.$router.go(-1)
    },
    handleAreaChange: function (picker, values) {
      picker.setColumnValues(1, citys[values[0]])
    },
    handleVisibleAreaPicker: function () {
      this.visibleAreaPicker = true
    },
    handleAreaCancel: function (value, index) {
      this.visibleAreaPicker = false
    },
    handleAreaConfirm: function (value, index) {
      this.visibleAreaPicker = false
      this.area = value
    },

    handleSave: function () {
      console.log('保存')

      const error = []

      if (!this.name) {
        error.push('请输入姓名')
      }

      if (error.length) {
        Toast(error[0])

        return
      }
    }
  },

  components: {
    HeaderLayout,
    Icon,
    CellGroup,
    Field,
    Cell,
    Popup,
    Picker,
  },
}

</script>

<style lang="less" scoped>

.back {
  i {
    color: #fff;
  }
}

.save {
  padding-right: 10px;
}

</style>